<template>
  <div>
    <el-container>
      <!--头部导航栏开始-->
      <el-header class="head">
        <el-menu
            router
            :default-active="menuPath" style="padding-left: 400px" class="el-menu-demo" mode="horizontal">
          <el-menu-item index='/page/Index'>首页</el-menu-item>
          <el-menu-item index="/page/gonglve">景点攻略</el-menu-item>
          <el-menu-item index='/page/book/BookHotel'>订酒店</el-menu-item>
          <div v-if="isLogin" >
            <span style="font-size: 20px">欢迎{{nickname}}回来
            <a href="/page/UserCenter">
              <el-avatar  style="display: inline-block;margin: 0px;position: relative;
            top: 15px" :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </a>
            </span>
            <el-button class="b1" @click="logout()">退出登录</el-button>
          </div>
          <div v-else class="head-r-l">
            <a href='/regist'>注册</a>
            <el-divider direction="vertical"></el-divider>
            <a href='/login'>登录</a>
          </div>
        </el-menu>
      </el-header>
      <!--头部导航栏结束-->
      <el-main>
        <router-view/>
      </el-main>
<!--        尾部部分-->
      <el-footer style="padding: 0px">
        <div class="foot-s">
          <div style="padding-top: 30px">
            <p>© 2023 liujiaxian.cn 京ccc备888888号 京公网安备888888888888号 京ccc证888888号</p>
            <p>网络出版服务许可证 增值电信业务经营许可证 营业执照 广播电视节目制作经营许可证 网络文化许可证 网上有害信息举报专区 帮助中心</p>
          </div>
          <el-divider></el-divider>
          <div>
            <p>违法和不良信息举报、投诉电话: 888-88888888 举报、投诉邮箱: liujiaxian@ww.com 涉未成年人不良信息专用举报邮箱: liujiaixian@mafengwo.com 算法推荐违规信息专用举报邮箱:liujiaxian@mafengwo.com 全国旅游投诉电话: 12345</p>
            <p style="font-size: 20px">旅游之前，先上旅游网！</p>
            <i style="font-size: 60px" class="el-icon-star-on"></i>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data(){
    return{
      menuPath:'',
      isLogin:false,
      nickname: '',
      currentUser:{},
    }
  },
  methods:{
    logout(){
      localStorage.removeItem('jwt');
      this.isLogin=false;
    },
    showNickname(){
      let url="http://localhost:9580/users/nickname";
      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
          let responseBody=response.data;
          this.nickname=responseBody.data;
          if(this.nickname!=null){
            this.isLogin=true;
          }
      })
    },

  },
  watch:{
    '$route'(to,from){
      let path=to.path;
      if (path.startsWith('/page/book/BookHotel')){
        path='/page/book/BookHotel';
      }
      this.menuPath=path;
      if (this.$router.currentRoute.path=='/page/Index'){
        this.$router.go();
      }

    },

  },
  mounted() {
    let path=this.$router.currentRoute.path;
    if (path.startsWith('/page/book/BookHotel')){
        path='/page/book/BookHotel';
    }
    this.menuPath=path;
    console.log(this.menuPath);
    this.showNickname();
  }
}
</script>
<style>
.nameA{
  text-decoration: none;
  color: black;
}
.head {
  color: #333;
  text-align: center;
  line-height: 60px;
  box-sizing: border-box;
}

.head1 {
  margin-top: 100px;
  padding-left: 0px;
  width: 950px;
}

.el-main {
  color: #333;
  height: 100%;
  padding-left: 450px;
  box-sizing: border-box;
}

.el-menu-demo {
  width: 100%;
  margin: 0 auto;
  padding-left: 350px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.head-r-l a {
  text-decoration: none;
}

.el-row {
  margin-bottom: 20px;
}

:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {

}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

h2 {
  margin: 0;
  font-size: 20px;
}

.span-s {
  font-size: 15px;
}

.hotel-live {
  text-align: center;
  width: 950px;
  margin-top: 50px;
}

.el-tabs-s {
  width: 950px;
  box-sizing: border-box;
}

.monitorTop {
  /*!/ position: relative;  相对定位,*/
  position: relative;
  /*vw是width of view(port)的缩写；
100vw表示百分之百的视图宽度；
123px是需要减去的宽度；
减号的两边必须都有至少一个空格*/
  height: calc(50% - 123px);
}

.monitorTop .el-tabs__item {
  font-size: 20px !important;
}

::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto
}
.img-s{
  width: 303px;
  height: 220px;
  margin-bottom: 15px;
}
.foot-s{
  background-color: #3e3e3e;
  height: 300px;
  text-align: center;
  color: #bbbbbb;
}
.b1{
  height: 60px;
  font-size: 15px;
}
</style>
